<template>
	<!-- 新增修改弹窗 -->
	<el-dialog v-model="dialog" :title="state.form.id ? '修改菜单' : '添加菜单'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" label-width="120px" :rules="state.rules">
			<el-form-item label="菜单名称" prop="name">
				<el-input v-model="state.form.name"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="上级菜单" prop="parentId">
						<el-tree-select
							v-model="state.form.parentId"
							:data="state.menuTree"
							check-strictly
							:props="defaultProps"
							:render-after-expand="false"
							node-key="id"
						>
							<template #default="{ node, data }"> {{ $t(node.label) }}</template>
						</el-tree-select>
					</el-form-item>
					<el-form-item label="菜单权限" v-if="state.form.type == '1'" prop="permission">
						<el-input v-model="state.form.permission"></el-input>
					</el-form-item>
					<el-form-item label="菜单icon" prop="icon" v-if="state.form.type == '0'">
						<IconSelector placeholder="请输入菜单图标" v-model="state.form.icon" />
					</el-form-item>
					<el-form-item label="外链状态" v-if="state.form.type == '0'" prop="outerStatus">
						<el-radio-group v-model="state.form.outerStatus">
							<el-radio label="0">否</el-radio>
							<el-radio label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单编码" v-if="state.form.type == '0'" prop="path">
						<el-input v-model="state.form.path"></el-input>
					</el-form-item>

					<el-form-item label="应用系统" prop="applicationKey">
						<el-select v-model="state.form.applicationKey" style="width: 100%">
							<el-option v-for="item in application_key" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="state.form.type">
							<el-radio v-for="item in menu_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单路径" v-if="state.form.type == '0'" prop="component">
						<el-input v-model="state.form.component"></el-input>
					</el-form-item>
					<el-form-item label="重定向地址" v-if="state.form.type == '0'" prop="redirect">
						<el-input v-model="state.form.redirect"></el-input>
					</el-form-item>
					<el-form-item label="排序序号" prop="sort">
						<el-input-number v-model="state.form.sort" :min="0" :max="99999" controls-position="right" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" @click="submitForm(formRef)" :loading="loading">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref } from 'vue';
import { addObj, editObj, getList, getById } from '/@/api/upms/menu';
import { ElMessage, FormInstance } from 'element-plus';
import { useDict } from '/@/utils/dict';
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
const emit = defineEmits(['initPage']);
interface State {
	form: {
		id: string | undefined;
		name: string;
		type: string;
		icon: string;
		parentId: string;
		permission: string;
		outerStatus: string;
		path: string;
		component: string;
		applicationKey: string;
		sort: number;
		redirect: string;
	};
	rules: object;
	menuTree: Array<any>;
}
const state = reactive<State>({
	form: {
		id: undefined,
		name: '',
		type: '0',
		icon: '',
		parentId: '',
		permission: '',
		outerStatus: '',
		path: '',
		component: '',
		applicationKey: '',
		sort: 0,
		redirect: '',
	},
	rules: {
		name: [
			{
				required: true,
				message: '请输入菜单名称',
				trigger: 'change',
			},
		],
		icon: [
			{
				required: true,
				message: '请选择icon图标',
				trigger: 'change',
			},
		],
		type: [
			{
				required: true,
				message: '请选择类型',
				trigger: 'change',
			},
		],
		parentId: [
			{
				required: true,
				message: '请选择上级菜单',
				trigger: 'change',
			},
		],
		permission: [
			{
				required: true,
				message: '请输入菜单权限',
				trigger: 'change',
			},
		],
		path: [
			{
				required: true,
				message: '请输入菜单编码',
				trigger: 'change',
			},
		],
		component: [
			{
				required: true,
				message: '请输入菜单路径',
				trigger: 'change',
			},
		],
		sort: [
			{
				required: true,
				message: '请输入排序序号',
				trigger: 'change',
			},
		],
	},
	menuTree: [],
});
// 字典
const { application_key, menu_type } = useDict('application_key', 'menu_type');

const dialog = ref(false);
const loading = ref(false);
const formRef = ref<FormInstance>();
const defaultProps = {
	children: 'children',
	label: 'name',
};
const initForm = (row: any | undefined) => {
	dialog.value = true;
	if (row && row.id) {
		getDetail(row.id);
	}
	if (row && row.parentId) {
		state.form.parentId = row.parentId;
	}
	getTreeSelect();
};
const getDetail = (id: string) => {
	loading.value = true;
	// 修改
	getById(id)
		.then((response) => {
			loading.value = false;
			state.form = response.data.data;
		})
		.catch(() => {
			loading.value = false;
		});
};
const getTreeSelect = () => {
	getList()
		.then((response) => {
			const menu = {
				id: '0',
				name: '顶级菜单',
				children: [],
				parentId: '0',
			};
			const menuList = response.data.data;
			menuList.unshift(menu);
			state.menuTree = menuList;
		})
		.catch(() => {});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.form.id = undefined;
	state.form.parentId = '';
	loading.value = false;
	dialog.value = false;
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			if (state.form.id) {
				//修改
				edit();
			} else {
				//新增
				add();
			}
		}
	});
};
/**
 * 新增
 */
const add = () => {
	addObj(state.form)
		.then(() => {
			resetForm(formRef.value);
			ElMessage.success('新增成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 修改
 */
const edit = () => {
	editObj(state.form)
		.then(() => {
			resetForm(formRef.value);
			ElMessage.success('修改成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
defineExpose({
	initForm,
});
</script>

<style lang="scss"></style>
